/**
 * 1. Setting to inline-block guarantees the same height when applied to both
 *    button elements and anchor tags.
 * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but
 *    at least make them look like they're not focused.
 */
.kuiButton {
  display: inline-block; /* 1 */
  appearance: none;
  cursor: pointer;
  padding: 4px 12px 5px;
  font-size: $kuiFontSize;
  font-weight: $buttonFontWeight;
  line-height: $kuiLineHeight;
  height: $buttonHeight;
  text-decoration: none;
  border: none;
  border-radius: $kuiBorderRadius;

  @include kuiButtonDisabled {
    cursor: not-allowed;
    opacity: .5;
  }

  @include kuiButtonActive {
    transform: translateY(1px);
  }

}

  /**
   * 1. Solves whitespace problems introduced by inline elements.
   */
  .kuiButton__inner {
    display: flex; /* 1 */
    align-items: center; /* 1 */
  }

.kuiButton--small {
  font-size: $buttonSmallFontSize;
  padding: $buttonSmallPadding;
  height: $buttonSmallHeight;
}

.kuiButton--fullWidth {
  width: 100%;
  text-align: center;
}

.kuiButton--iconText {
  .kuiButton__icon {
    &:first-child:not(:only-child) {
      margin-right: $buttonIconSpacing;
    }

    &:last-child:not(:only-child) {
      margin-left: $buttonIconSpacing;
    }
  }

  &.kuiButton--small {
    .kuiButton__icon {
      &:first-child:not(:only-child) {
        margin-right: $buttonIconSmallSpacing;
      }

      &:last-child:not(:only-child) {
        margin-left: $buttonIconSmallSpacing;
      }
    }
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--basic {
  color: $buttonBasicTextColor;
  background-color: $buttonBasicBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonBasicTextColor;
  }

  @include kuiButtonHoverAndActive {
    background-color: $buttonBasicHoverBackgroundColor !important; /* 1 */
  }

  @include darkTheme {
    color: $buttonBasicTextColor--darkTheme;
    background-color: $buttonBasicBackgroundColor--darkTheme;

    @include kuiButtonFocus {
      @include focus($kuiFocusColor, $kuiBackgroundColor--darkTheme);
      color: $buttonBasicTextColor--darkTheme;
    }

    @include kuiButtonHoverAndActive {
      background-color: $buttonBasicHoverBackgroundColor--darkTheme !important; /* 1 */
    }
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--primary {
  color: $buttonDefaultTextColor;
  background-color: $buttonPrimaryBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonPrimaryHoverBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--success {
  color: $buttonDefaultTextColor;
  background-color: $buttonSuccessBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonSuccessHoverBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--danger {
  color: $kuiColorRed;
  background-color: rgba($kuiColorWhite, 0.5);
  border: solid 1px $kuiColorRed;

  @include kuiButtonFocus {
    @include focus($kuiFocusDangerColor);
    color: $kuiColorRed;
  }

  @include kuiButtonHoverAndActive {
    color: darken($kuiColorRed, 10%) !important;
    background-color: rgba(lighten($kuiColorRed, 50%), 0.5);
    border: solid 1px darken($kuiColorRed, 10%);
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--warning {
  color: $buttonDefaultTextColor;
  background-color: $buttonWarningBackgroundColor;

  @include kuiButtonFocus {
    @include focus($kuiFocusWarningColor);
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonWarningHoverBackgroundColor;
  }

  @include kuiButtonDisabled {
    background-color: $buttonWarningDisabledBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 * 2. Override either Bootstrap or Timelion styles.
 */
.kuiButton--hollow {
  color: $kuiLinkColor !important; /* 2 */
  background-color: transparent;

  @include darkTheme {
    color: $kuiLinkColor--darkTheme !important; /* 2 */
  }

  @include kuiButtonHoverAndActive {
    color: $kuiLinkHoverColor !important; /* 1 */
    text-decoration: underline;

    @include darkTheme {
      color: $kuiLinkColor-isHover--darkTheme !important; /* 2 */
    }
  }
}

.kuiButton--secondary {
  color: $kuiLinkColor !important; /* 2 */
  border: solid 1px $kuiColorBlue;
  background-color: rgba($kuiColorWhite, 0.5);

  @include kuiButtonHoverAndActive {
    color: darken($kuiLinkColor, 10%) !important; /* 1 */
    border: solid 1px darken($kuiColorBlue, 10%);
    background-color: rgba(lighten($kuiLinkColor, 50%), 0.5);
  }
}
